<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=OCKmGWMADgUpHt6AcBRIBRHVHSS1FkEa"></script>
    <style>
        html,body{
            height: 100%;
            position: relative;
        }
        *{
            box-sizing: border-box;
        }
        .layui-form{
            width: 400px;
            padding: 50px 20px 50px 0;
            /* opacity: .85; */
            background: #fff;
            position: absolute;
            left: 30px;
            top: 30px;
            z-index: 100;
            max-height: calc(100% - 60px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        #allmap{
            width: 100%;
            height: 100%;
        }
        #page{
            display: flex;
            padding: 10px 30px;
            justify-content: center;
        }
        #page li{
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            border: 1px solid #b8b8b8;
            cursor: pointer;
        }
        #list{
            font-size: 16px;
            padding-left: 30px;
            flex: 1;
            overflow-y: auto;
        }
        #list .list_item{
            padding: 20px;
            border-bottom: 1px solid #b8b8b8;
        }
        #list .active{
            background: #dfdfdf;
        }
        #list a{
            color: -webkit-link;
            text-decoration: underline;
        }
        .loading{
            display: none;
        }
    </style>
</head>
<body>
    <form action="/base" method="post">
        <div class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" name="url" placeholder="安居客的" value="https://cd.zu.anjuke.com/fangyuan/gaoxin/fx3-x1/" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">主容器</label>
                <div class="layui-input-block">
                    <input type="text" name="main" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">列表</label>
                <div class="layui-input-block">
                    <input type="text" name="list" autocomplete="off" class="layui-input">
                </div>
            </div> -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn submit" lay-submit lay-filter="formDemo">立即提交</button>
                    <button class="layui-btn loading">信息处理中....</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <div id="list">
                
            </div>
            <div class="page_box">
                <ul id="page"></ul>
            </div>
        </div>    
    </form>
    <div id="allmap"></div>
    <script>
        var adds = [],map;
        var add_info=[];
        //Demo
        layui.use('form', function(){
            var form = layui.form;
            //监听提交
            form.on('submit(formDemo)', function(data){
                // $.post("/base",{
                //     url:escape($("input[name=url]").val()),
                // },'json').then(res=>{
                //     adds=res.data.address.map(n=>n.address);
                //     bdGEO();
                // })
                // return false;
            });
        });
        $("form").submit(function(){
            $(".submit").hide();
            $(".loading").show();
            remove_overlay();
            $.post("/base",{
                url:encodeURIComponent($("input[name=url]").val()),
            }).then(res=>{
                add_info=JSON.parse(JSON.stringify(res.data.address));
                list_text_arr=JSON.parse(JSON.stringify(res.data.address));
                adds=JSON.parse(JSON.stringify(res.data.address)).map(n=>n.address);
                let htmls=JSON.parse(JSON.stringify(res.data.page)).map(n=>`<li data-link="${n.link}">${n.text}</li>`);
                $("#page").empty().html(htmls.join(''));
                list_text_arr=list_text_arr.map((n,i)=>`
                    <div class="list_item" data-index="${i}">
                        <p><span style="color:red;margin-right:10px;">${i+1}.</span>${n.address}</p>
                        <p>房租：${n.price}</p>
                        <p><a target=" _blank" href="${n.link}">查看详情</a></p>
                    </div> `)
                $("#list").empty().html(list_text_arr.join(""));
                bdGEO();
            })
            return false;
        })
        $("#page").on("click","li",function(){
            let link=$(this).data("link");
            $("input[name=url]").val(link);
            $("form").submit();
        });
        $("#list").on("click",".list_item",function(){
            let index=$(this).data("index");
            if(!$(this).hasClass("active")){
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
            }
            let point=add_info[index].point;
            var marker = new BMap.Marker(point);
            var infoWindow = new BMap.InfoWindow(add_info[index].html, {height:280,});  // 创建信息窗口对象 
                map.openInfoWindow(infoWindow,point); //开启信息窗口
            map.addOverlay(marker);
            map.panTo(new BMap.Point(point.lng, point.lat));
            map.setZoom(14); 
        })
    </script>
    <script type="text/javascript">
        // 百度地图API功能
        map = new BMap.Map("allmap");
        map.centerAndZoom('成都', 13);
        map.enableScrollWheelZoom(true);
        var index = 0;
        var myGeo = new BMap.Geocoder();
        function bdGEO(){
            var add = add_info[index];
            if(add){
                let html=`
                    <div style="font-size:16px;">
                        <img src="${add.img}" style="dispaly:block;margin:auto;height:auto;max-height:150px;"/>
                        <p>地址：${add.address}</p>
                        <p style="color:red;">房租：${add.price}</p>
                        <p><a style="color: -webkit-link;text-decoration: underline;margin-top:10px;" target=" _blank" href="${add.link}">查看详情</a></p>
                    </div>
                `;
                add.html=html;
            }
            geocodeSearch(add,index);
            index++;
        }
        function geocodeSearch(add,i){
            if(i < adds.length){
                setTimeout(window.bdGEO,100);
            }else{
                $(".submit").show();
                $(".loading").hide();
                console.log("完成了")
            }
            if(!add) return;
            myGeo.getPoint(add.address, function(point){
                add_info[i].point=point;
                if (point) {
                    var address = new BMap.Point(point.lng, point.lat);
                    let html=`<div style="padding:15px;"><p style="font-size:16px;">序号：${index}</p>${add.html}</div>`;
                    add.html=html;
                    //addMarker(address,new BMap.Label(html,{offset:new BMap.Size(20,-10)}));
                    addMarker(address,add);
                }
            }, "成都");
        }
        // 编写自定义函数,创建标注
        function addMarker(point,label){
            var marker = new BMap.Marker(point);
            let opts={
                height:280,
            };
            var infoWindow = new BMap.InfoWindow(label.html, opts);  // 创建信息窗口对象 
                marker.addEventListener("click", function(){          
                    map.openInfoWindow(infoWindow,point); //开启信息窗口
                    map.panTo(new BMap.Point(point.lng, point.lat));
                });
            map.addOverlay(marker);
            //marker.setLabel(label);
        }
        function remove_overlay(){
            index=0;
            map.clearOverlays();         
        }
    </script>
</body>
</html>